<template>
	<div class="center-body">
		<div class="map" id="map"></div>
		<div class="res-button">
			<button v-if="showButton" @click="reChinaMap()">返回全国</button>
		</div>
	</div>
</template>
<script >
import backimg from '../assets/carbon/againtittpt.png'
import simbolimg from '../assets/carbon/zhongban.png'
import * as echarts from "echarts";
import { cityMap } from '@/utils/array'
export default {
    props:['size'],
  name: 'chinamap',
	data() {
		return {
			myChart:null,
      showButton:true,
      lnglat: [],
      data: [{
        name: '海信冰箱',
        wanggong: '6000',
        shangwang: '3924.57',
        xiaofeng: '1500',
        fadian:'280',
        value: [103.714144,30.829777]
      }, {
        wanggong: '2817',
        shangwang: '2295.38',
        xiaofeng: '500',
        fadian:'130',
        name: '华海科技',
        value: [104.124672,30.666336]
      }, {
        wanggong: '14400',
        shangwang: '4862.53',
        xiaofeng: '5000',
        fadian:'360',
        name: '四川南玻',
        value: [104.05601,30.663114]
      }, {
        wanggong: '2310',
        shangwang: '1144.6',
        xiaofeng: '950',
        fadian:'150',
        name: '亨通光电',
        value: [104.056401,30.629547]
      }, {
        wanggong: '69514',
        shangwang: '9709.23',
        xiaofeng: '48800',
        fadian:'1500',
        name: '中嘉汽车',
        value: [103.638328,30.957225]
      }],
      timer: null,
      index: 0,
      geocoder: null,
      arrrrr: [],
		}
  },
  async mounted() {
    console.log(simbolimg);
    let json = require(`@/utils/map/json/province/510100.json`)
    this.drawMap('510100',json)
  },
  methods: {
    // echarts中国地图
    drawMap(name, json) {
      // 前两部是解决切换卡死的关键
      // 判断地图是否渲染
      let myChart = echarts.getInstanceByDom(document.getElementById("map"))
      // 如果渲染则清空地图 
      if (myChart != null) {
        myChart.dispose()
      }
      // 初始化地图
      myChart = echarts.init(document.getElementById("map"));
      let size = this.size
      if (!json) {
        json = require('@/utils/map/json/china.json');
        this.showButton = false
      }
      echarts.registerMap(name, json)
      let layoutSize = size
      let option = {
        tooltip: {
          enterable: true,
          // 触发方式 mousemove, click, none, mousemove|click
          triggerOn: `mousemove`,
          // item 图形触发， axis 坐标轴触发， none 不触发
          trigger: `item`,
          renderMode: 'html',
          className:'echarts-tooltip',
          // 浮层隐藏的延迟
          hideDelay: 100,
          border: 'none',
          // position: function (point, params, dom, rect, size) {
          //   return [point[0] - 85, point[1] - 185];
          // },
          // position:'top',
          // 背景色
          // padding: '2px',
          backgroundColor: `rgb(0,0,0,0.5)`,
          // backgroundColor: `blue`,
          textStyle: {
            color: '#fff'
          },
          // 自定义提示框内容
          formatter: function (params) {
            return `<div style="background-image: url(${backimg});width: 300px;height: 130px;
                      background-size:100% 100% !important;padding: 40px !important; ">
                      <div style="color: #f98053;font-size:20px;margin-bottom: 10px;">${params.name} </div>
                      <div style="color:#9CADD5;font-size:16px;">
                        <div style="margin-bottom: 6px;">网供负荷 &nbsp;&nbsp;&nbsp;&nbsp; ${params.data.wanggong} kW</div>
                        <div style="margin-bottom: 6px;">上网负荷 &nbsp;&nbsp;&nbsp;&nbsp; ${params.data.shangwang} kW</div>
                        <div style="margin-bottom: 6px;">调控能力-削峰 &nbsp;&nbsp;&nbsp;&nbsp; ${params.data.xiaofeng} kW</div>
                        <div style="margin-bottom: 6px;">分布式能源发电 &nbsp;&nbsp;&nbsp;&nbsp; ${params.data.fadian} kW</div>
                      </div>
                  </div>
            `
            }
        },
        geo: [{
        layoutCenter: ['50%', '50%'],//位置
        layoutSize: layoutSize,//大小
        show: true,
        map: name,
        roam: false,
        zoom: 0.65,
        aspectScale: 1,
        label: {
            normal: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            emphasis: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            }
        },
        itemStyle: {
            normal: {
                areaColor: {
                    type: "linear",
                    x: 1200,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    colorStops: [{
                        offset: 0,
                        color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                    },],
                    global: true, // 缺省为 false
                },
                borderColor: "#c0f3fb",
                borderWidth: 1,
                shadowColor: "#8cd3ef",
                shadowOffsetY: 10,
                shadowBlur: 120,
            },
            emphasis: {
                areaColor: "rgba(0,254,233,0.6)",
                // borderWidth: 0
            }
        }
    }, {
        type: "map",
        map: name,
        zlevel: -1,
        aspectScale: 1,
        zoom: 0.65,
        layoutCenter: ["50%", "51%"],
        layoutSize: layoutSize,
        roam: false,
        silent: true,
        itemStyle: {
            normal: {
                borderWidth: 1,
                // borderColor:"rgba(17, 149, 216,0.6)",
                borderColor: "rgba(58,149,253,0.8)",
                shadowColor: "rgba(172, 122, 255,0.5)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "rgba(5,21,35,0.1)",
            },
        },
    }, {
        type: "map",
        map: name,
        zlevel: -2,
        aspectScale: 1,
        zoom: 0.65,
        layoutCenter: ["50%", "52%"],
        layoutSize: layoutSize,
        roam: false,
        silent: true,
        itemStyle: {
            normal: {
                borderWidth: 1,
                // borderColor: "rgba(57, 132, 188,0.4)",
                borderColor: "rgba(58,149,253,0.6)",
                shadowColor: "rgba(65, 214, 255,1)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "transpercent",
            },
        },
    }, {
        type: "map",
        map: name,
        zlevel: -3,
        aspectScale: 1,
        zoom: 0.65,
        layoutCenter: ["50%", "53%"],
        layoutSize: layoutSize,
        roam: false,
        silent: true,
        itemStyle: {
            normal: {
                borderWidth: 1,
                // borderColor: "rgba(11, 43, 97,0.8)",
                borderColor: "rgba(58,149,253,0.4)",
                shadowColor: "rgba(58,149,253,1)",
                shadowOffsetY: 15,
                shadowBlur: 10,
                areaColor: "transpercent",
            },
        },
    }, {
        type: "map",
        map: name,
        zlevel: -4,
        aspectScale: 1,
        zoom: 0.65,
        layoutCenter: ["50%", "54%"],
        layoutSize: layoutSize,
        roam: false,
        silent: true,
        itemStyle: {
            normal: {
                borderWidth: 5,
                // borderColor: "rgba(11, 43, 97,0.8)",
                borderColor: "rgba(5,9,57,0.8)",
                shadowColor: "rgba(29, 111, 165,0.8)",
                shadowOffsetY: 15,
                shadowBlur: 10,
                areaColor: "rgba(5,21,35,0.1)",
            },
        },
          },],
        series: [

          {
            name: '地图',
            type: "effectScatter",
            // type: "scatter",
            map: name,
            aspectScale: 0.85,
            coordinateSystem: 'geo',
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: layoutSize,
            zoom: 1,
            scaleLimit: {
              min: 1,
              max: 2,
            },
            label: {
              show: false,
              // color: "#ffff",
            },
            data: this.data.map(function (item) {
            return {
                name:item.name,
              value: [item.value[0], item.value[1], 10], // 最后一个数字控制涟漪特效的大小
              wanggong: item.wanggong,
              shangwang: item.shangwang,
              xiaofeng: item.xiaofeng,
              fadian:item.fadian
            };
            }),
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
                color:'#16ffff',
                opacity: 1
            },
            rippleEffect: {
              period: 4, //波纹秒数
              brushType: 'stroke', //stroke(涟漪)和fill(扩散)，两种效果
              scale: 6 //波纹范围
            },
            emphasis: {
              label: {
                show: false
              }
            },
            selectedMode: true,
          },
                  {
                    type: "scatter",
            symbol: `image://${simbolimg}`,
            symbolSize: [5,60],
            symbolOffset:[0,'-60%'],
            coordinateSystem: "geo",
            geoIndex: 1,
            // 取消一些交互
            select: {
               disabled: false,
            },
            emphasis: {
               disabled: true,
            },
            data:this.data.map(function (item) {
            return {
                name:item.name,
              value: [item.value[0], item.value[1]], // 最后一个数字控制涟漪特效的大小
              wanggong: item.wanggong,
              shangwang: item.shangwang,
              xiaofeng: item.xiaofeng,
              fadian:item.fadian
            };
            })
        },
        ],
      }
      myChart.setOption(option, true);
      this.myChart = myChart
      // 开启tooltip轮播
      this.setIntervalMyChart()
      // 定义鼠标移入移除事件
      this.mouseEvents()
      window.addEventListener("resize", () => {
        //图表响应处理
        myChart.resize();
      });
      // 点击省市区跳转下沉
      myChart.on('click', e => {
        this.darwProvniceMap(e)
      })
    },
    // 轮播开启以及关闭
    setIntervalMyChart() {
      this.timer = setInterval(() => {
        const dataLength = this.data.length
        // 每次激活提示时清除上一次提示
        this.dispatchActionChart("hideTip", this.index);
        // 索引增加
        // 激活提示
        this.dispatchActionChart("showTip", this.index);
        this.index++;
        if (this.index == dataLength-1) {
          // 需要对最后一个进行清除，对第一个进行激活
          let tempTimer = setTimeout(() => {
            // this.dispatchActionChart("hideTip", dataLength-1);
            this.index = 0;
            this.dispatchActionChart("showTip", this.index-1);
            clearTimeout(tempTimer);
          },2000);
        }
      },2000)
    },
    // 设置轮播
    dispatchActionChart(type, dataIndex) {
      this.myChart.dispatchAction({
        type: type,
        seriesIndex: 0,
        dataIndex: dataIndex,
      });
    },
    // 设置鼠标移入echarts
    mouseEvents() {
      this.myChart.on("mouseover", () => {
        // 停止定时器，清除之前的高亮
        clearInterval(this.timer);
        this.dispatchActionChart("hideTip", this.index);
      });
      // 鼠标划出重新定时器开始
      this.myChart.on("mouseout", () => {
        clearInterval(this.timer);
        // 启动轮播
        this.setIntervalMyChart();
      });
    },
    // 切换省份
    darwProvniceMap(val) {
      if (cityMap[val.name]) {
        let json = require(`@/utils/map/json/province/${cityMap[val.name]}.json`)
        this.drawMap(cityMap[val.name], json)
        this.showButton = true
      }
    },
    // 返回全国
    reChinaMap() {
      this.drawMap('china')
    },
  },
  // 页面关闭清除定时器
  beforeDestroy() {
    clearInterval(this.timer)
  },
  watch: {
    // data(val) {
    //   监听返回数据，拿到数据项第一条的数据坐标，定位到其所在市
    //   if (val.length) {
    //     this.lnglat = val[0].value
    //     axios.get(
    //       `https://restapi.amap.com/v3/geocode/regeo?location=${val[0].value}&key=d16b59895ea80ae1dc95fcf2165996ad`
    //     ).then(ele => {
    //       console.log(ele);
    //       let json = require(`@/utils/map/json/province/${cityMap[ele.data.regeocode.addressComponent.city]}.json`)
    //         this.drawMap(cityMap[ele.data.regeocode.addressComponent.city], json)
    //         this.showButton = true
    //         this.setIntervalMyChart()
    //         this.mouseEvents()
    //     }).catch(err => {
    //       this.drawMap('china')
    //     })
    //   }
    // }
  }
	}
</script>

<style scoped>
::v-deep .echarts-tooltip{
  /* width: 250px;
  background-size:100% 100% !important; 
  padding: 40px !important;
  height: 125px;
  /* background-position: -10px 10px 10px -10px !important; */
   box-shadow: none !important;
  /* background-image: url('../assets/carbon/tittp.png'); */
  border: none !important;
  background-color: rgba(0, 0, 0, 0) !important;

}
	/*提示框容器*/
  .map{
    height: 100%;
/* color: #276fce; */
  }
  .center-body{
    width: 100%;
    height: 100%;
    position:relative ;
  }
	.res-button{
position: absolute;
left: 0;
top: 0;

	}
  .res-button button{
    background-color: #092044;
color:#fff;
width: auto;
height: 25px;
border: none;
font-size: 12px;
	  border-radius: 4px;
  }
  .title{
    font-size: 30px;
  }
</style>

